<template>
	<div class="container">
		<canvas ref="canvasRef" class="canvas"></canvas>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const canvasRef = ref(null);
let c;
let mouse = { x: undefined, y: undefined };
const maxRadius = 40;
const minRadius = 10;
const colorArray = [
	'#002EA6','#01847F','#F9D2E4','#FF770F',
	'#80D1C8','#FD3E4A','#492D22','#4E5B48',
	'#644F40','#F47747','#E7CAD3','#F8C7BE','#BA5B6A',
	'#D2A1D3','#B6BDCB','#92ABBA','#706B88','#ADD7CD',
];

function Circle(x, y, dx, dy, radius) {
	this.x = x;
	this.y = y;
	this.dx = dx;
	this.dy = dy;
	this.radius = radius;
	this.minRadius = minRadius;
	this.color = colorArray[Math.floor(Math.random() * colorArray.length)];
	
	this.draw = function () {
		c.beginPath();
		c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
		c.fillStyle = this.color;
		c.fill();
	};
	
	this.update = function () {
		if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
			this.dx = -this.dx;
		}
		if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
			this.dy = -this.dy;
		}
		this.x += this.dx;
		this.y += this.dy;
		
		if (mouse.x - this.x < 20 && mouse.x - this.x > -20 && mouse.y - this.y < 20 && mouse.y - this.y > -20) {
			if (this.radius < maxRadius) {
				this.radius += 1;
			}
		} else if (this.radius > this.minRadius) {
			this.radius -= 1;
		}
		
		this.draw();
	};
}

let circleArray = [];

function init() {
	circleArray = [];
	for (let i = 0; i <= 1000; i++) {
		const radius = Math.random() * 3 + 1;
		const x = Math.random() * (innerWidth - radius * 2) + radius;
		const y = Math.random() * (innerHeight - radius * 2) + radius;
		const dx = Math.random() - 0.8;
		const dy = Math.random() - 0.8;
		circleArray.push(new Circle(x, y, dx, dy, radius));
	}
}

function animate() {
	requestAnimationFrame(animate);
	c.clearRect(0, 0, innerWidth, innerHeight);
	for (let i = 0; i < circleArray.length; i++) {
		circleArray[i].update();
	}
}

onMounted(() => {
	const canvas = canvasRef.value;
	c = canvas.getContext('2d');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	
	window.addEventListener('mousemove', function (event) {
		mouse.x = event.clientX;
		mouse.y = event.clientY;
	});
	
	window.addEventListener('resize', function () {
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		init();
	});
	
	init();
	animate();
});
</script>

<style scoped lang="scss">
.container {
	height: 100vh;
	display: flex;
	overflow: hidden;
	background: #000;
}
</style>
